<template>
    <div class="categorylist">
        <xjsearch></xjsearch>
        <van-tabs @change="beforeChange" v-model="active">
            <van-tab v-for="(item, index) in classifyList" :title="item.title" :key="index">
                <div class="child-item">
                    <van-row gutter="1">
                        <van-col span="6" v-for="(item1, index1) in item._child" :key="index1" class="vancol">
                            <van-tag
                                plain
                                type="primary"
                                :class="isclicktagcolor[index1] ? 'selecttagcolor' : 'defaulttagcolor'"
                                @click="clickTag(index1, item1.id, item1.title)"
                                >{{ item1.title }}</van-tag
                            >
                        </van-col>
                    </van-row>
                </div>
            </van-tab>
        </van-tabs>

        <van-cell v-show="this.courselist.length == 0 ? false : true">
            <template #title>
                <span style="font-weight: bold; font-size: 16px">课程</span>
            </template>
            <template #right-icon>
                <router-link :to="{ name: 'morelivelist', query: { id } }" style="color: black">
                    查看更多
                    <van-icon name="arrow" size="15" />
                </router-link>
            </template>
        </van-cell>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh2">
            <van-card
                num="2"
                price="2.00"
                :desc="item4.description"
                :title="item4.title"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                origin-price="10.00"
                v-for="(item4, index4) in courselist"
                :key="index4"
                @click="clickcoures(item4.id, item4.type)"
            >
                <template #thumb>
                    <van-image width="110" height="90" :src="item4.cover" />
                </template>
                <template #price>
                    <span style="color: red">{{ item4.price == 0 ? '免费' : '￥' + item4.price }}</span>
                </template>
                <template #origin-price>
                    <span>{{ item4.marking_price == 0 ? '' : '￥' + item4.marking_price }}</span>
                </template>
                <template #tags>
                    <van-tag plain type="danger" style="margin-right: 3px" v-for="(item5, index5) in item4.tag" :key="index5">{{
                        item5
                    }}</van-tag>
                </template>
                <template #num>
                    <span>{{ item4.view }}次观看</span>
                </template>
            </van-card>
        </van-pull-refresh>

        <van-cell v-show="this.livelist.length == 0 ? false : true">
            <template #title>
                <span style="font-weight: bold; font-size: 16px">近期直播</span>
            </template>
            <template #right-icon>
                <router-link :to="{ name: 'morelivelist', query: { id } }" style="color: black">
                    查看更多
                    <van-icon name="arrow" size="15" />
                </router-link>
            </template>
        </van-cell>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh2">
            <van-card
                num="2"
                price="2.00"
                :desc="item4.description"
                :title="item4.title"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                origin-price="10.00"
                v-for="(item4, index4) in livelist"
                :key="index4"
                @click="clickLive(item4.id)"
            >
                <template #thumb>
                    <van-image width="110" height="90" :src="item4.cover" />
                </template>
                <template #price>
                    <span style="color: red">{{ item4.price == 0 ? '免费' : '￥' + item4.price }}</span>
                </template>
                <template #origin-price>
                    <span>{{ item4.marking_price == 0 ? '' : '￥' + item4.marking_price }}</span>
                </template>
                <template #tags>
                    <van-tag plain type="danger" style="margin-right: 3px" v-for="(item5, index5) in item4.tag" :key="index5">{{
                        item5
                    }}</van-tag>
                </template>
                <template #num>
                    <span>{{ item4.view }}次观看</span>
                </template>
            </van-card>
        </van-pull-refresh>
        <van-cell v-show="this.list.length == 0 ? false : true">
            <template #title>
                <span style="font-weight: bold; font-size: 16px">{{ cellname }}视频</span>
            </template>
            <template #right-icon>
                <!-- <van-icon name="sort" size="15" />排序 -->
                <router-link :to="{ name: 'morecolumnlist', query: { id } }" style="color: black">
                    查看更多
                    <van-icon name="arrow" size="15" />
                </router-link>
            </template>
        </van-cell>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
                <van-card
                    num="2"
                    price="2.00"
                    :desc="item2.description"
                    :title="item2.title"
                    thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                    origin-price="10.00"
                    v-for="(item2, index2) in list"
                    :key="index2"
                    @click="clickColumn(item2.id)"
                >
                    <template #thumb>
                        <van-image width="110" height="90" :src="item2.cover" />
                    </template>
                    <template #price>
                        <span style="color: red">{{ item2.price == 0 ? '免费' : '￥' + item2.price }}</span>
                    </template>
                    <template #origin-price>
                        <span>{{ item2.marking_price == 0 ? '' : '￥' + item2.marking_price }}</span>
                    </template>
                    <template #tags>
                        <van-tag plain type="danger" style="margin-right: 3px" v-for="(item3, index3) in item2.tag" :key="index3">{{
                            item3
                        }}</van-tag>
                    </template>
                    <template #num>
                        <span>{{ item2.view }}次观看</span>
                    </template>
                </van-card>
            </van-list>
        </van-pull-refresh>
        <xjmenubar :menubar="tabbar" :prevent="false" :cactive="cactive"></xjmenubar>
    </div>
</template>

<script>
import xjsearch from '@/components/shop/xjsearch.vue';
import xjmenubar from '@/components/shop/xjmenubar.vue';
export default {
    components: {
        xjsearch,
        xjmenubar
    },
    data() {
        return {
            courselist: [],
            active: 0, //分类索引
            tabbar: '', //菜单数据
            cactive: 1, //菜单索引
            isclicktagcolor: [], //点击后tag的颜色
            classifyList: [], //父分类数据
            cellname: '', //cell名字
            id: '', //发送子分类id获取cardlist
            list: [], //视频数据列表
            livelist: [],
            columnlist: [], //每次获取10个cardlist数据
            loading: true,
            finished: false,
            refreshing: false,
            page: 1, //第1页数据
            total: '', //获得总cardlist总数
            searchdata: ''
        };
    },
    methods: {
        clickcoures(id, type) {
            if (type == 'column') {
                this.$router.push({ name: 'product', query: { id } });
            } else if (type == 'exam') {
                this.$router.push({ name: 'examcontent', query: { id, columnid: 'order' } });
            } else if (type == 'video') {
                this.$router.push({ name: 'videocontent', query: { id, columnid: 'order' } });
            } else if (type == 'audio') {
                this.$router.push({ name: 'audiocontent', query: { id, columnid: 'order' } });
            } else if (type == 'image_text') {
                this.$router.push({ name: 'image_textcontent', query: { id, columnid: 'order' } });
            }
        },
        async getPhonePageData() {
            let res = await this.$frontaxios.post(this.$front.getPhonePageData);
            //console.log(res);
            if (!res.data) {
                this.$notify({ type: 'warning', message: '请设置店铺首页，再过来查看' });
                return;
            }
            if (res.code == 1) {
                this.tabbar = res.data.tabbar;
                console.log(this.tabbar);
            } else {
                this.$notify({ type: 'warning', message: res.msg });
            }
        },
        async onLoad() {
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
            }
            await this.getColumnList(this.id);
            this.getcouserList(this.id);
            this.list.push(...this.columnlist);
            this.page++;
            this.loading = false;
            if (this.list.length >= this.total) {
                this.finished = true;
            }
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.page = 1;
            this.onLoad();
            this.$toast.success('刷新成功');
        },
        onRefresh2() {
            this.page = 1;
            this.getLiveLIst(this.id);
            this.$toast.success('刷新成功');
        },
        async getSortDir() {
            //得到分类目录
            let res = await this.$frontaxios.post(this.$front.getClassifyListData);
            //console.log(res);
            if (res.code == 1) {
                this.classifyList = res.data.list;
                console.log(this.classifyList);
            } else {
                console.log('得到分类列表失败');
            }
        },
        async getColumnList(id) {
            //获得教程视频信息
            let query = {
                id,
                status: 1,
                page: this.page,
                limit: 10
            };
            //console.log(query);
            let res = await this.$frontaxios.post(this.$front.getColumnList, query);
            if (res.code == 1) {
                this.columnlist = res.data.columndata;
                this.total = res.data.total;
                for (let i = 0; i < this.columnlist.length; i++) {
                    if (this.columnlist[i].tag) {
                        this.columnlist[i].tag = this.columnlist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取专栏数据列表失败');
            }
        },
        async getcouserList(id) {
            //获得课程
            let query = {
                id,
                status: 1
            };
            //console.log(query);
            let res = await this.$frontaxios.post(this.$front.getKnowledgeList3, query);
            if (res.code == 1) {
                this.courselist = res.data.list;
                this.total = res.data.total;
                for (let i = 0; i < this.courselist.length; i++) {
                    if (this.courselist[i].tag) {
                        this.courselist[i].tag = this.courselist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取专栏数据列表失败');
            }
        },
        async getLiveList(id) {
            //获得直播列表
            let query = {
                id,
                status: 1,
                page: this.page,
                limit: 4,
                keyword: ''
            };
            let res = await this.$frontaxios.post(this.$front.getLiveList, query);
            if (res.code == 1) {
                this.loading = true;
                this.livelist = res.data.livecoursedata;
                this.total = res.data.total;
                for (let i = 0; i < this.livelist.length; i++) {
                    if (this.livelist[i].tag) {
                        this.livelist[i].tag = this.livelist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取直播数据列表失败');
            }
        },
        async clickTag(index, id, name) {
            //切换子类标签
            this.setDefaultTagColor();
            //this.isclicktagcolor[index] = true;
            //this.$forceUpdate();
            this.$set(this.isclicktagcolor, index, true);
            this.cellname = name;
            this.id = id;
            this.page = 1;
            this.list = [];
            this.onLoad();
            this.getLiveList(id);
        },
        setDefaultTagColor() {
            //设置所有标签为灰色
            for (let i = 0; i < this.isclicktagcolor.length; i++) {
                this.isclicktagcolor[i] = false;
            }
        },
        async beforeChange(index) {
            this.isclicktagcolor[0] = true;
            //console.log(index);
            //console.log(this.classifyList[index])
            this.list = [];
            this.livelist = [];
            this.page = 1;
            if (this.classifyList[index]._child) {
                //如果存在子类数据
                this.id = this.classifyList[index]._child[0].id; //初始化分类id
                this.cellname = this.classifyList[index]._child[0].title; //获得第1个子类标签标题}
            } else {
                this.id = -1;
                this.cellname = '';
            }
            this.onLoad();
            this.getLiveList(this.id);
        },
        clickColumn(id) {
            //console.log(id);
            this.$router.push({
                name: 'product',
                query: {
                    id
                }
            });
        },
        clickLive(id) {
            //console.log(id);
            this.$router.push({
                name: 'livecontent',
                query: {
                    id
                }
            });
        }
    },
    async created() {
        //console.log(this.cactive);
        this.getPhonePageData(); //获得菜单栏数据初始化菜单数据
        await this.getSortDir(); //获得标签分类数据初始化分类数据
        this.setDefaultTagColor(); //设置所有标签为灰色初始化颜色
        this.isclicktagcolor[0] = true; //让子类标签第一个为蓝色初始化颜色
        if (this.classifyList[0]._child) {
            //如果存在子类数据
            this.id = this.classifyList[0]._child[0].id; //初始化分类id
            this.cellname = this.classifyList[0]._child[0].title; //获得第1个子类标签标题}
        } else {
            this.id = -1;
            this.cellname = '';
        }
        this.onLoad();
        this.getLiveList(this.id); //得到直播列表数据
    }
};
</script>

<style lang="scss" scoped>
.categorylist {
    .van-card__content {
        margin-left: 20px;
    }

    .van-cell {
        align-items: center;
        border: 1px solid #eee;
        height: 40px;
    }
}

.child-item {
    margin-top: 10px;
    text-align: center;

    .vancol {
        margin-bottom: 8px;

        .defaulttagcolor {
            color: #87929b;
        }

        .selecttagcolor {
            color: #168dfa;
        }
    }
}
</style>
